<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page isELIgnored="false" %>
<html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>

<base href="<%=basePath%>">


<!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
      integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap-theme.min.css"
      integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">

<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>
<head>
    <meta charset="UTF-8">
    <meta name="Keywords" content="关键词,关键词">
    <meta name="description" content="">
    <title></title>

    <script type="text/javascript" src="js/jquery-1.42.min.js"></script>
    <script type="text/javascript" src="js/jquery.js"></script>
    <link rel="stylesheet" href="css/base.css" type="text/css"/>
    <link rel="stylesheet" href="css/headbott.css" type="text/css"/>
    <!-- Chang URLs to wherever Video.js files will be hosted -->
    <link href="css/video-js.css" rel="stylesheet" type="text/css">
    <link href="css/product-detail.css" rel="stylesheet" type="text/css">
    <!-- video.js must be in the <head> for older IEs to work. -->
    <script type="text/javascript" src="js/video.js"></script>


</head>
<body>
<div id="header">
    <div class="heade-con">
        <div class="logo"><a href=""><img src="images/LOGO.png"/></a></div>
        <div class="nav posa">
            <ul>
                <li><a class="vcolor" href="index.jsp">首页</a></li>
                <li><a href="gyzc-list.jsp">公益众筹</a></li>
                <li><a href="cop.jsp">常见问题</a></li>
                <li><a href="ly-list.jsp">众筹资讯</a></li>
                <li><a href="new_product.jsp" style="">发布项目</a></li>
            </ul>
        </div>
        <div class="search">
            <form action="">
                <input type="text" class="search-txt" value="找项目">
                <input type="submit" class="search-but" value="">
            </form>
        </div>
        <div class="index-login">
            <a href="login.jsp">登录</a>
            <a href="user.jsp">注册</a>
        </div>
    </div>
</div>
<script>

    var d_var = $(".search .search-txt").val();
    $(".search .search-txt").focus(function () {
        if ($(this).val() == d_var) {
            $(this).val("");
        }
    });

    $(".search .search-txt").blur(function () {
        if ($(this).val() == "") {
            $(this).val("找项目");
        }
    });

    $(".btn-default").click(function () {
        var h = $(window).scrollTop();//获取当前滚动条距离顶部的位置
        $("html,body").animate({scrollTop: h + 1000}, 800);//点击按钮向下移动800px，时间为800毫秒
    });

</script>

<div class="p-detail_con">
    <div class="p-detail_contit">
        <h1>${product.title}</h1>
        <div class="p-detail_cfx">
            <span class="p-detail_contit"><a href=""><i></i>分享</a></span>
            <span class="p-detail_contit2"><a href=""><i></i>点赞</a></span>
        </div>
        <div class="p-detail_cfx2">
            <ul>
                <li class="p-detail_cfx2-1">发起人</li>
                <li class="p-detail_cfx2-2">farwe <span>|</span></li>

                <li class="p-detail_cfx2-3">福建 福州 <span>|</span></li>
                <li class="p-detail_cfx2-4">${product.serviceName}</li>
            </ul>
        </div>
    </div>

    <div class="p-detail-tab2">
        <ul>
            <li><a class="p-detail-tab2-tb" href="">项目主页</a></li>
            <li>
                <button id="change"  class="btn btn-info">评论</button>
            </li>
        </ul>
    </div>
    <div id="displayComment" class="displayComment" style="display: none">
        <span id="plsl"></span>
        <ul id="remove1">
            <div id="plnr"></div>

        </ul>
        <ul  class="product-ym">
            <a class="product-ym_bg" href="/product/getAllComment01?pageNo=1">首页</a>
            <c:if test="${pageInfo.hasPreviousPage}">
                <a href="/product/getAllComment01?pageNo=${page.pageNum-1}" aria-label="Previous">
                    <span aria-hidden="true">&laquo;</span>
                </a>
            </c:if>

            <c:forEach items="${page.navigatepageNums}" var="page_Num">
                <c:if test="${page_Num==page.pageNum}">
                </c:if>
                <a href="/product/getAllComment01?pageNo=${page_Num}">${page_Num}</a>
            </c:forEach>

            <c:if test="${page.hasNextPage}">
                <a class="product-ym_xyy" href="/product/getAllComment01?pageNo=${page.pageNum+1}">
                    <span aria-hidden="true">&raquo;</span>
                </a>
            </c:if>
            <li><a href="/product/getAllComment01?pageNo=${page.pages}">末页</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#change").click(function(){
                $.ajax({
                    type:"post",
                    url:"/product/getAllComment01",
                    data: {},
                    dataType:'json',
                    success:function (result){
                        var comments = result.extend.page.list;
                        $("#plsl").text("评论数量： "+result.extend.page.total);
                        $("#remove1 li").remove();
                        $("#remove1 br").remove();
                        $.each(comments,function (index,item){
                            // alert(item.user.username)
                            var userName = $("<li></li>").append(item.user.username);
                            var content = $("<li></li>").append(item.content);
                            var br = $("<br>");
                            $("<ul></ul>").append(userName).append(content).append(br).appendTo("#plnr");
                        });

                    }
                })

                $("#displayComment").show();
            })
        })
    </script>
    <div class="p-detail_con2">
        <div class="p-detail_con2l">

            <div style="width:675px;height:445px;margin:30px auto">
                <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640"
                       height="445" poster="images/oceans-clip.png" data-setup="{}">
                    <source src="images/n930.mp4" type='video/mp4'/>
                    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track>
                    <!-- Tracks need an ending tag thanks to IE9 -->
                    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track>
                    <!-- Tracks need an ending tag thanks to IE9 -->
                </video>
            </div>

            <div class="p-detail_txt1">

                <h3>项目介绍</h3>
                <div><img style="width: 650px" src="${product.imageUrl}" alt=""/></div>
                <p>
                    ${product.story}
                </p>
                <p>
                    ${product.story}</p>
                <p>
                    ${product.story}
                </p>

                <h3>我的项目介绍</h3>
                <p>
                    ${product.story}
                </p>
                <p>
                    ${product.story}</p>
                <p>
                    ${product.story}
                </p>

                <div><img src="images/pu-s2_11.png" alt=""/></div>
            </div>

            <div class="detail-bott">
                <p>标签：<a href="">短片</a><a href="">电影</a><a href="">bilding</a><a href="">love</a></p>
                <div class="detail-bott2"><i>
                    <img src="images/zcvprod-a_32.png" alt=""/></i>如果你对项目有疑问，可以发起咨询<span>
                    <a href="javascript:void(0);">对发起人提问</a></span></div>
                <div class="textarea1">
                    <form action="/product/addComment">
                        <textarea name="comment" class="textarea2"></textarea>
                        <button  class="textarea2-tji" type="submit">提交</button>
                    </form>
                </div>
                <script>

                    $(".detail-bott2 span a").click(function () {
                        $(".textarea1").toggle();
                    })
                </script>
            </div>
        </div>

        <div class="p-detail_con2r">
            <div class="p-detail_con2r1">

                <div class="bot-con1zti">
                    <div style="background-color: ${statusColor};width: 65px;height: 24px;padding-top: 4px; text-align:center;color: white"
                         class="product_one">${status}</div>
                </div>
                <div class="p-detail_con2r1tit">目前累计金额</div>
                <div class="p-detail_con2r1min">${product.getmoney}</div>
                <div class="llloading-bar">
                    <div class="loading-bar">
                        <div class="amount blue" style="width:9%">
                            <div class="loaded">
                            </div>
                            <span>${Math.round(10000*product.getmoney/(product.money))/100.0}%</span>
                            <div class="lines"></div>
                        </div>
                    </div>
                </div>
                <p><span>目标</span><i>${product.money}</i></p><br>
                <p><span>剩余</span><i>${product.money-product.getmoney}</i></p><br>
                <p><span>支持者</span><i>${product.getpeople}</i></p>
                <p class="loading-barcolo">项目截止时间:${date}</p>

            </div>
            <div class="loading-bzcz">
                <div class="loading-bzcz-1">
                    <span>支持￥0.01</span><i>已有<b>2</b>位支持者</i>
                </div>
                <a href="">支持￥0.01</a>
            </div>
            <div class="loading-bzcz">
                <div class="loading-bzcz-1">
                    <span>支持￥0.01</span><i>已有<b>2</b>位支持者</i>
                </div>
                <p>电影签名海报和明信片。全国包邮。</p>
                <div class="l">运费：包邮</div>
                <div class=""><img src="images/zcvprod-a_24.png" alt=""/></div>
                <div class="l">预计发放时间</div>
                <a href="">支持￥0.01</a>
            </div>
            <div class="loading-bzcz">
                <div class="loading-bzcz-1">
                    <span>支持￥0.01</span><i>已有<b>2</b>位支持者</i>
                </div>
                <p>电影签名海报和明信片。全国包邮。</p>
                <div class="l">运费：包邮</div>
                <div class=""><img src="images/zcvprod-a_24.png" alt=""/></div>
                <div class="l">预计发放时间</div>
                <a href="">支持￥0.01</a>
            </div>
            <div class="loading-bzcz">
                <div class="loading-bzcz-1">
                    <span>支持￥0.01</span><i>已有<b>2</b>位支持者</i>
                </div>
                <p>电影签名海报和明信片。全国包邮。</p>
                <div class="l">运费：包邮</div>
                <div class=""><img src="images/zcvprod-a_24.png" alt=""/></div>
                <div class="l">预计发放时间</div>
                <a href="">支持￥0.01</a>
            </div>
            <div class="loading-bzcz">
                <div class="loading-bzcz-1">
                    <span>支持￥0.01</span><i>已有<b>2</b>位支持者</i>
                </div>
                <p>电影签名海报和明信片。全国包邮。</p>
                <div class="l">运费：包邮</div>
                <div class=""><img src="images/zcvprod-a_24.png" alt=""/></div>
                <div class="l">预计发放时间</div>
                <a href="">支持￥0.01</a>
            </div>
            <div class="loading-bzcz">
                <div class="loading-bzcz-1">
                    <span>支持￥0.01</span><i>已有<b>2</b>位支持者</i>
                </div>
                <p>电影签名海报和明信片。全国包邮。</p>
                <div class="l">运费：包邮</div>
                <div class=""><img src="images/zcvprod-a_24.png" alt=""/></div>
                <div class="l">预计发放时间</div>
                <a href="">支持￥0.01</a>
            </div>

            <div class="loading-bzcz loading-bzcz2">
                <div class="loading-bzcz-2">
                    付款与退款说明：
                </div>
                <p>1.项目需在截止日期之前筹资成功</p>
                <p> 2.筹资失败的项目将会退款到会员余额中，下
                    次可以继续使用。如果需要提现的会员，可以
                    到会员中心点击提现申请！</p>
            </div>

            <div class="loading-bzcz">
                <div class="loading-bzcz-2">
                    发起人信息：
                </div>
                <div class="detali-fqrxx">
                    <div class="detali-fqrxx_header">
                        <img src="images/zcvprod-a_28.png" alt=""/></div>
                    <div class="detali-fqrxx_text">
                        <p>fanwe</p>
                        <p>上次登陆时间：2015/5/7</p>
                        <p class="h"><i><img src="images/dt_03.png" alt=""/></i><s>福建 福州</s>
                        <h2><img
                                src="images/delite-i_14.png" alt=""/></h2></p>
                        <p class="h"><i><img src="images/zcvprod-a_10.png" alt=""/></i><s>发信息</s></p>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>
<div id="bottom">
    <div class="bot-con1">
        <ul>
            <li class="bot-con1-li1">我们已经做到</li>
            <li>单项支持人数<span class="inde-span1"></span></li>
            <li>单项筹款金额<span class="inde-span2"></span></li>
            <li>累计筹款金额<span class="inde-span3"></span></li>
        </ul>
    </div>
    <div class="bot-con1 bot-con2">
        <ul>
            <li class="bot-con1-li1">发起项目流程</li>
            <li><span class="inde-span4"></span>发起人创建项目</li>
            <li><span class="inde-span5"></span>项目获得支持</li>
            <li><span class="inde-span6"></span>发起人发放回报</li>
            <li><span class="inde-span7"></span>用户收到回报</li>
        </ul>
    </div>
    <div class="bottom-ggt"><a href=""><img src="images/bottbom_68.jpg" alt=""/></a></div>
    <div class="zc-yqlink">
        <ul>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里旅行</a></li>
            <li><a href="">阿里云计算</a></li>
            <li><a href="">阿里巴巴集团</a></li>
            <li><a href="">淘宝网</a></li>
            <li><a href="">天猫</a></li>
            <li><a href="">聚划算</a></li>
            <li><a href="">全球速卖通</a></li>
            <li><a href="">阿里巴巴国际交易市场</a></li>
            <li><a href="">1688</a></li>
            <li><a href="">阿里妈妈</a></li>
            <li><a href="">阿里云计算</a></li>
        </ul>
    </div>
    <div class="footer-bd">

        <a href=" ">关于淘宝</a>
        <a href=" ">合作伙伴</a>
        <a href=" ">营销中心</a>
        <a href=" ">廉正举报</a>
        <a href=" ">联系客服</a>
        <a href=" ">开放平台</a>
        <a href=" ">诚征英才</a>
        <a href=" ">联系我们</a>
        <a href=" ">网站地图</a>
        <a href=" ">法律声明</a>　　　
        <em>© 2003-2015 Taobao.com 版权所有</em><br>

        <br>
        <span>网络文化经营许可证：<a href=" ">浙网文[2013]0268-027号</a></span>
        <b>|</b>
        <span data-spm-protocol="i">增值电信业务经营许可证：<a href="">浙B2-20080224-1</a></span>
        <b>|</b>
        <span>信息网络传播视听节目许可证：1109364号</span>
        <b>|</b>
        <span>举报电话:0571-81683755</span>
    </div>
</div>
</body>
</html>